<template>
  <div class="login">
    <section class="login-register">
      <div class="header">
        <div>
          <img src="../assets/zk_logo_use.png" alt="">
        </div>
        <div>
          <span class="t-white line"></span>
        </div>
        <div >
          <div class="header-text" style="height: 50px;line-height: 50px !important;"><font size="4">{{$store.state.system_name_en}}{{$store.state.system_name_cn}}</font></div>
        </div>
      </div>
      <div class="login-box">
        <div class="white-box" style="background: transparent;">
          <div class="form-horizontal form-material" id="loginform">
            <h3 class="login-title t-white" >登 录</h3>
            <!--<div class="form-group " style="margin-bottom: 36px;">-->
              <!--<label class="control-label col-xs-3 t-white" style="font-size:17px;padding:6px 0px">用户名:</label>-->
              <!--<div class="col-xs-9 p-rl">-->
                <!--<i class="iconfont icon-xingmingyonghumingnicheng t-white font-user"></i>-->
                <!--<input class="form-control login-input b-r-5" autocomplete="new-password" type="text" name="userName"-->
                       <!--required="" @keyup.enter="login()" v-model="userName" placeholder="请输入用户名">-->
              <!--</div>-->
            <!--</div>-->
            <!--<div class="form-group" style="margin-bottom: 20px;">-->
              <!--<label class="control-label col-xs-3 t-white" style="font-size:17px;padding:6px 0px">密码:</label>-->
              <!--<div class="col-xs-9 p-rl">-->
                <!--<i class="iconfont icon-mima t-white font-user"></i>-->
                <!--<input class="form-control login-input b-r-5" autocomplete="new-password" type="password"-->
                       <!--name="password"-->
                       <!--required="" @keyup.enter="login()" v-model="password" placeholder="请输入登录密码">-->
              <!--</div>-->
            <!--</div>-->
            <div class="form-group " style="margin-bottom: 36px;">
              <div class="col-xs-12 p-rl">
                <i class="iconfont icon-xingmingyonghumingnicheng t-white font-user"></i>
                <input class="form-control login-input b-r-5" autocomplete="new-password" type="text" name="userName"
                     required="" @keyup.enter="login()" v-model="userName" placeholder="请输入用户名">
              </div>
            </div>
            <div class="form-group" style="margin-bottom: 20px;">
              <div class="col-xs-12 p-rl">
                <i class="iconfont icon-mima t-white font-user"></i>
                <input class="form-control login-input b-r-5" autocomplete="new-password" type="password"
                       name="password"
                       required="" @keyup.enter="login()" v-model="password" placeholder="请输入登录密码">
              </div>
            </div>
            <div class="form-group" style="margin-bottom: 30px;">
              <div class="col-xs-12 p-rl">
                <i class="iconfont icon-dui t-white" :style="{color:checkMe?'#409FFE':''}"></i>
                <input style="position: absolute;left: 18px;top: 2px;z-index: 333;font-size: 13px;" class="op-0" v-model="checkMe" type="checkbox" id="rememberMe">
                <label for="rememberMe" class="t-white f-s-12" style="margin-left: 28px;">记住密码</label>
              </div>
            </div>
            <!--<div class="form-group" id="authcode">-->
            <!--<div class="col-xs-12">-->
            <!--<div>-->
            <!--<input class="form-control login-input"-->
            <!--type="text" v-model="verificationCode" required="required" id="verificationCode"-->
            <!--placeholder="验证码">-->
            <!--<img id="authcodeImg" @click="refreshCode" :src="codeSrc" alt="">-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <div class="form-group text-center m-t-20">
              <div class="col-xs-12 m-b-5 text-danger login-msg" v-show="loginError">{{loginMsg}}</div>
              <div class="col-xs-12">
                <div @click="login()"
                     class="btn btn-info btn-lg btn-block text-uppercase waves-effect waves-light login-btn">
                  <div></div>
                  登录
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  export default {
    name: "",
    data() {
      return {
        showOpacity: false,
        userName: "",
        checkMe: false,
        password: "",
        verificationCode: "",
        codeSrc: this.$store.state.port + "/dsp/verification/code.do?m=" + new Date().getTime(),
        rememberMe: false,
        loginError: false,
        loginMsg: ""
      }
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        if(localStorage.getItem("reload")!="1"){
          window.location.reload();
          localStorage.setItem("reload","1");
        }
      })
    },
    beforeRouteLeave(to,from,next){
      localStorage.removeItem("reload");
      next();
    },
    mounted() {
      this.test();
      this.Test();
      this.$nextTick(() => {
        if (localStorage.getItem("userName")) {
          this.userName = localStorage.getItem("userName");
          this.checkMe = true;
        }
        if (localStorage.getItem("passWord")) {
          this.password = localStorage.getItem("passWord");
        }
      })
      let that=this;
    },
    methods: {
      async test() {//异步
        console.log("hello")
      },
      Test() {//同步
        console.log("test")
      },
      refreshCode() {
        this.codeSrc = this.$store.state.port + "/dsp/verification/code.do?m=" + new Date().getTime();
      },
      login() {
        //测试
        // this.$router.push('/dashboard');
        if (!this.userName || !this.password) {
          this.loginError = true;
          this.loginMsg = "用户名或密码不能为空";
          return;
        }
        let data = {
          userName: this.userName,
          password: this.password,
        };
        let url = this.$store.state.port + "/auth/login";
        this.$store.commit("setStatus", true);
        localStorage.removeItem("user");
        this.$axios.post(url, this.$qs.stringify(data)).then(response => {
            this.$store.commit("setName", 1);
            localStorage.setItem("user", response.data.userName || "");
            this.$store.commit("setUserName", response.data.userName);
            this.$store.commit("setIsLoad", true);
            this.getMenu();
        }).catch(error => {
          this.$store.commit("setStatus", false);
          this.loginError = true;
          this.loginMsg = "登录失败，请重试！";
          // throw new Error(error);
        })
      },
      getMenu() {
        this.$store.commit("setStatus", true);
        let url = this.$store.state.port + "/auth/menu/get";
        this.$axios.get(url).then(response => {
          // this.$store.commit("setStatus", false);
          if (response && response.data.code == 0) {
            let data = response && response.data.data || [];
            // debugger;
            if(data.length<1){
              this.$router.push('/noAuth');
            }else{
              if(data[0].child.length>0){
                this.$router.push(data[0].child[0].path+"?v=1");
              }else{
                this.$router.push(data[0].path+"?v=1");
              }
            }
          }else{
            this.$router.push('/noAuth');
          }
        }).catch(e => {
          this.$store.commit("setStatus", false);
          this.$router.push('/noAuth');
        })
      },
      showPass() {
        this.showOpacity = true;
      },
      hidePass() {
        this.showOpacity = false;
      },
    }
  }
</script>

<style scoped lang="less" type="text/less">
  .login-msg {
    font-size: 14px;
  }

  .white-box {
    padding-bottom: 15px;
  }

  .login {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999999999;
    background: #fff;
  }

  .login-lable-font {
    height: 40px;
    font-size: 13px;
    padding: 0;
    padding-left: 28px;
    color: #000;
  }

  .form-group {
    display: block;
    width: 100%;
    margin-left: 0 !important;
    margin-bottom: 25px;
    input::-webkit-input-placeholder{
      color: #959595;
    }
    input::placeholder{
      color: #959595;
    }
    input{
      color: #303030;
    }
  }

  .login-input {
    box-shadow: 0 0 234px inset #fff !important;
    border-bottom: 1px solid #000 !important;
    outline: none;
    border: none;
    height: 40px;
    font-size: 13px;
    padding: 0;
    padding-left: 28px;
    color: #000;
    border-radius: 6px !important;
  }

  .btn-group-lg > .btn, .btn-lg {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
  }

  @media (max-width: 480px) {
    .login-box {
      width: 100%;
    }
  }

  .login-prompt {
    float: right;
    font-size: 12px;
    position: relative;
    border: 1px solid rgb(0, 0, 0);
    margin-bottom: 10px;
    padding: 3px;
    border-radius: 3px;
    color: #e4393a;
    opacity: 0;

    i {
      position: absolute;
      bottom: -13px;
      right: 15px;
      border: 6px solid transparent;
      border-top-color: #000;
    }

  }

  .form-horizontal .checkbox, .form-horizontal .radio {
    min-height: 27px;
  }

  .pass-word {
    padding-top: 7px;
    font-size: 14px;
    color: #666;
  }

  .opacityShow {
    opacity: 1;
  }

  button:hover {
    background: #008efa;
  }

  button {
    outline: 0 !important;
    border: 0 !important;
  }

  button:focus {
    outline: 0 !important;
    border: 0 !important;
  }

  #authcode {
    img {
      width: 25%;
      height: 36px;
      float: right;
    }
    input {
      width: 75%;
      display: inline-block;
      border-bottom: 0 !important;
    }
    margin-bottom: 60px;
  }

  #authcode > div > div {
    border-bottom: 1px solid #000;
  }

  .box-title {
    visibility: hidden;
  }

  .login-title {
    font-weight: 500;
    color: #F3F3F4;
    font-size: 24px;
    margin-bottom: 58px;
  }

  .header {
    padding: 30px;
    overflow: hidden;
    div {
      .header-text {
        height: 25px;
        font-size: 15px;
        line-height: 25px;
        color: #E9E9EC;
        display: inline-block;
        width: 100%;
      }
      height: 50px;
      float: left;
      .line {
        height: 20px;
        display: inline-block;
        background: #6674A4;
        margin: 15px 10px;
        width: 2px;
      }
      img {
        height: 100%;
        width: auto;
      }
    }
  }

  .login-btn {
    position: relative;
    background: -webkit-linear-gradient(left, #00CDFC, #0071F3);
    background: -ms-linear-gradient(left, #00CDFC, #0071F3);
    background: -moz-linear-gradient(left, #00CDFC, #0071F3);
    background: linear-gradient(to left, #00CDFC, #0071F3);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    border: none;
    div{
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1;
      left: 0;
      top: 0;
      background: #fff;
      opacity: 0.2;
      filter: alpha(opacity=20);
      display: none;
    }
  }

  .login-btn:hover {
    background: -webkit-linear-gradient(left, #00CDFC, #0071F3);
    background: -ms-linear-gradient(left, #00CDFC, #0071F3);
    background: -moz-linear-gradient(left, #00CDFC, #0071F3);
    background: linear-gradient(to left, #00CDFC, #0071F3);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    border: none;
    div{
      display: block;
    }
  }

  .font-user {
    position: absolute;
    left: 23px;
    top: 10px;
    color: #B0B0B0;
    font-size: 14px;
  }

  .icon-dui {
    position: absolute;
    left: 23px;
    top: 0px;
    z-index: 2;
    font-size: 13px;
  }

  .text-danger {
    color: #e4393c;
  }
</style>
